<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子传父</title>
</head>
<body>

<!--
  子组件通过自定义事件向父组件传值

  <button @click="$emit('enlarge-text')">扩大字体</button>
  enlarge-text就是自定义事件名

  父组件监听子组件的事件
  <menu-item @enlarge-text='fontSize += 0.1'></menu-item>
-->

<div id="app" :style="{fontSize: fontSize + 'px'}">
  父组件内容
  <!-- $event 这个名字是固定的 -->
  <menu-item @enlarge-text='enlarge($event)'></menu-item>
</div>

<script src="../lib/vue.js"></script>
<script>
  Vue.component('menu-item', {
    template: `
      <div>
        <button
          @click="$emit('enlarge-text', {size: 10, color: 'red'})"
        >
        扩大字体
        </button>
      </div>
    `
  })

  let vm = new Vue({
    el: '#app',
    data: {
      fontSize: 14,
    },
    methods: {
      enlarge(o) {
        console.log(o)
        this.fontSize += o.size;
      }
    }
  })
</script>

</body>
</html>